<template>
    <div id="analysis">
      <a-tabs v-model:activeKey="activeKey" style="height: 100%" size="large">
        
        <a-tab-pane key="library" tab="功能库" :force-render="true" style="height: 100%">
          <a-button type="primary" @click="handleLogout" style="margin-right: 16px">主界面</a-button>
          <a-layout class="page_content_inner">
            <a-layout-header class="content_header">
              <a-form class="form_class" :model="formState" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }"
                autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
                <!-- <a-form-item label="搜索" name="name">
                  <a-input-search v-model:value="formState.name" placeholder="请输入" enter-button @search="onSearch"
                    allow-clear style="width: 394px" />
                </a-form-item> -->
  
                <a-form-item label="排序" name="sort">
                  <a-select class="default_height" v-model:value="formState.sort" placeholder="请选择" style="width: 136px"
                    :getPopupContainer="(triggerNode: any) => {
                      return triggerNode.parentNode;
                    }
                      " @focus="focus" @change="handleChange">
                    <a-select-option :value="0">发布时间 新-旧</a-select-option>
                    <a-select-option :value="1">发布时间 旧-新</a-select-option>
                  </a-select>
                </a-form-item>
              </a-form>
            </a-layout-header>
            <a-layout-content class="content_content">
              <a-row :gutter="[24, 24]" style="height: 100%">
                <a-col :span="8" v-for="(item, index) in analysisList.slice(0, 9)" :key="item.id">
                <div class="one_analysis">
                <div class="left_analysis_inf">
                    <div class="left_analysis_inf_title">
                    <ellipsis-text :content="item.showname" />
                    </div>
                    <div class="left_analysis_inf_profile">
                    {{ item.description }}
                    </div>
                </div>
                <div class="right_analysis_action">
                    <div @click="changeFeatureLikeFn(item)">
                    <heart-outlined v-if="item.like === 0" class="icon_class" />
                    <heart-filled v-else class="icon_class" style="color: rgba(255, 77, 79, 0.85)" />
                    </div>
                    <a-button class="add_button" @click="toRouterPush(item, index)">
                    <template #icon><plus-outlined /></template>
                    </a-button>
                </div>
                </div>
                </a-col>
              </a-row>
            </a-layout-content>
            <a-layout-footer class="content_footer">
              <a-pagination v-model:current="formState.page" v-model:page-size="formState.per_page" :showSizeChanger="false"
                :total="total" :show-total="(total: any, range: any[]) => `共 5 条`
                  " @change="onChange" />
            </a-layout-footer>
          </a-layout>
        </a-tab-pane>
      </a-tabs>
    </div>
  </template>
  <script setup lang="ts">
  import { onMounted, onUpdated, reactive, ref } from "vue";
  import { spiderTask } from '@/api/user';
  import {
    HeartOutlined,
    HeartFilled,
    PlusOutlined,
  } from "@ant-design/icons-vue";
  import { useRouter, useRoute } from "vue-router";
  interface FormState {
    name: string;
    sort: 0 | 1;
    per_page: number;
    page: number;
  }
  const router = useRouter();
  const route = useRoute();
  // [PLAN] naming logic
  //        use `a_b` for `variable`
  //        and `camelName` for `func`
  const analysis_list = ref<any>([]);
  const isShowRouterView = ref(false);
  const total = ref<number>(0);
  const activeKey = ref("library");
  const handleLogout = () => {
  router.push('/home');
};
  const analysisList = ref<AnalysisItem[]>([
  { id: 1, showname: '零食', description: '爬取零食数据', like: 0 },
  { id: 2, showname: '鞋子', description: '爬取鞋子数据', like: 0 },
  { id: 3, showname: '手机', description: '爬取手机数据', like: 0 },
  { id: 4, showname: '衣服', description: '爬取衣服数据', like: 0 },
  { id: 5, showname: '电脑', description: '爬取电脑数据', like: 0 },
  // Add more items as needed
    ]);
  
  // let feature = ref<any>()
  
  const formState = reactive<FormState>({
    name: "",
    sort: 0,
    per_page: 9,
    page: 1,
  });
  const showNewPage = () => {
    const reg = /createTask/g;
    isShowRouterView.value = reg.test(route.fullPath);
  };
  const toRouterPush = async (item: any, index: number) => {
    console.log(item.id);
    const token = localStorage.getItem('access_token')
    const res = await spiderTask(item.id, token);
    if (res.code === 10000){
        router.push({
      path: "/home"
    });
    } else {
        console.log('res', res)
        message.error(res.message || '执行程序失败')
    }
    
  };
  
  onMounted(() => {
    showNewPage();
  
  });
  onUpdated(() => {
    showNewPage();
  });
  </script>
  <style lang="scss" scoped>
  @import "./spider.scss";
  </style>
  